<template>
<div class="login" :style="{height:offsetheight + 'px'}">

    <el-row class="text-center">
        <el-col :span="24" >
            <img src="../../assets/logintitle2.png" class="logintitle">
        </el-col>
    </el-row>

    <el-row>

        <el-col :span="12" class="loginimg">
            <img src="../../assets/loginimg1.png" width="300">
        </el-col>
        <el-col :span="12" class="" >
            <div class="loginDlg">
                <el-form ref="form" :model="form" label-width="120px"
                :rules="rules"
                style="margin-top:60px;"
                >
                  <el-form-item label="帐号" prop="username" >
                    <el-input v-model="form.username" ref="username" @keyup.enter.native="gogo"
                    style="width:322px;"
                    ></el-input>
                  </el-form-item>

                  <el-form-item label="密码" prop="password" class="mt50" >
                    <el-input type="password" v-model="form.password" @keyup.enter.native="gogo"
                    style="width:322px;"
                    ></el-input>
                  </el-form-item>

                  <el-form-item class="mt50"> 
                    <el-button type="primary" @click="gogo('form')"
                    style="width:322px;height:40px;background:rgba(23,154,166,1);border:1px solid rgba(68, 204, 215, 1);"
                    >登 录</el-button>
                  </el-form-item>
                </el-form>

            </div>
        </el-col>

    </el-row>
    
</div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    name: 'login123',
    data () {
        return {
            form: {
                username: '',
                password: '',
            },
			rules: {
				username: [
					{ required: true, message: '请输入账号', trigger: 'blur' },
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' }
				]
			},

            offsetheight : document.documentElement.clientHeight,
        }
    },

    components: {},

    computed: {},

    methods: {
		gogo(formName) {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					this.$http({
						fun: 'login',
						username: this.form.username,
						password: this.form.password,
						requestType: 'get',
						cb: res => {
							console.log(res, '接口返回来的数据');
							let that = this
							if(res.accressToken){
								this.$message({
									message: '恭喜您，登录成功！',
									type: 'success'
								});
								setTimeout(function() {
                                    that.$router.push({
                                        name: 'dashboard',
                                    });
								},1000)
                            }else{
								this.$message({
									message: res.errmsg,
									type: 'warning'
								});
                            }
						},
					});
				} else {
					console.log('error submit!!');
					return false;
				}
			});



            // var para = {
            // 	fun : 'login',
            // 	username : this.form.username,
            // 	password : this.form.password,
            // 	requestType : 'get',
            // 	cb : res => {
            // 		console.log(res);

            // 		//已经登录过了。
            // 		// if(res == '1'){
            // 			this.$router.push({
            // 				name: 'dashboard',
            // 			});
            // 		// }
            // 	},
            // 	err : res => {
            // 		this.$notify.error({
            //           title: '错误',
            //           message: res,
            //         });
            // 	},
            // };
            // http(para);
        },
    },
    watch: {},
    mounted () {
        this.$refs['username'].focus()
    },
}
</script>

<style scoped>
.login {
    /*width: 1920px;*/
    /*height: 1080px;*/
    background-image: url('../../assets/loginbg1.png');
}

.logintitle {
    margin-top: 120px;
}

.loginDlg {
    /*position: absolute;*/

    /*top : 450px;
    left: 1153px;*/
    width: 496px;
    height: 344px;
    background:rgba(24,175,183,0.4);
    border:1px solid rgba(100, 247, 255, 1);
    /*opacity:0.4;*/
    border-radius:10px;
    margin : 140px auto 0;
    color: #fff;
}


.loginimg {
    margin-top: 150px;
    text-align: center;
}
</style>
